import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Select, Button, Row, Col, message, DatePicker,notification } from 'antd';
import { querySysmemberList, queryTagList, taskAdd,  queryCarDetail } from '../service';
import moment from 'moment';
const layout = { labelCol: { span: 8 }, wrapperCol: { span: 16 } };

const CreateForm = ({
  modalVisible, onCancel, data, onConfirm,
  type: type, //0:添加预约任务 1：点击列表
}) => {
  const [driverList, setDriverList] = useState([]);
  const [testerList, setTesterList] = useState([]);
  const [carList, setCarList] = useState([]);
  const [tagList, setTagList] = useState([]);

  const [formRef] = Form.useForm()
  useEffect(() => {
    if (data.content && data.content != '') {
      data.content = '';
    }
    formRef.setFieldsValue(data)
  }, [data, formRef])
  useEffect(() => {
    queryTagList({ is_active: 1 })
      .then(({ code, data: reap = [], msg }) => {
        if (code === '200') {
          setTagList(reap ?? []);
        } else {
          setTagList([]);
        }
      })
      .catch(() => {
        setTagList([]);
      });
    queryCarDetail({ is_active: 1 })
      .then(({ code, data: reap = [], msg }) => {
        if (code === '200') {
          setCarList(reap ?? []);
        } else {
          setCarList([]);
        }
      })
      .catch(() => {
        setCarList([]);
      });

    querySysmemberList({ type: 1 })
      .then(({ code, data: reap = [], msg }) => {
        if (code === '200') {
          setDriverList(reap ?? []);
        } else {
          setDriverList([]);
        }
      })
      .catch(() => {
        setDriverList([]);
      });
    querySysmemberList({ type: 2 })
      .then(({ code, data: reap = [], msg }) => {
        if (code === '200') {
          setTesterList(reap ?? []);
        } else {
          setTesterList([]);
        }
      })
      .catch(() => {
        setTesterList([]);
      });
  }, []);

  const onFinish = (values) => {
    const { dateTime, ...formItems } = values;
    taskAdd({
      ...formItems, start_time: moment(dateTime[0]).format('YYYY-MM-DD HH:mm:ss'),
      end_time: moment(dateTime[1]).format('YYYY-MM-DD HH:mm:ss'),
    })
      .then(({ code, msg }) => {
        if (String(code) === '200') {
          onConfirm();
          message.success('添加成功！');
        } else {
          message.warning(msg || '添加失败！');
        }
      })
      .catch(() => {
        notification.warning({ message: '异常', description: '网络异常！' });
      });
    console.log('taskAdd=============', taskAdd);
  };

  return (
    <Modal
      width={800}
      destroyOnClose
      title="预约车辆"
      visible={modalVisible}
      onCancel={() => onCancel()}
      footer={null}
    >
      <Form form={formRef} {...layout} initialValues={data} onFinish={onFinish}>
        {type == 1 &&
          <Form.Item name="car_id" label="车辆" rules={[{ required: false }]} >
            <Row>
              <Col lg={{ span: 16 }} md={{ span: 16 }} sm={{ span: 12 }}>
                <div >{data.card}</div>
              </Col>
            </Row>
          </Form.Item>
        }
        {type == 0 &&
          <Form.Item name="car_id" label="车辆" rules={[{ required: true }]} >
            <Select>
              {carList.map(({ card, car_id }, index) => (
                <Select.Option key={car_id} value={car_id}>
                  {card}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
        }
        <Form.Item name="dateTime" label="预约时间" rules={[{ required: true }]}>
          <DatePicker.RangePicker showTime
           secondStep={60}
          minuteStep = {30}
           disabledTime={() => ({ disabledHours: () => [0, 1, 2, 3, 4, 5, 6, 7, 23, 24]})}   />
        </Form.Item>

        <Form.Item name="driver_id" label="司机">
          <Select>
            {driverList.map(({ name, id }, index) => (
              <Select.Option key={id} value={id}>
                {name}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item name="tester_id" label="测试人员" >
          <Select>
            {testerList.map(({ name, id }, index) => (
              <Select.Option key={id} value={id}>
                {name}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item name="task_tag_id" label="任务标签" >
          <Select>
            {tagList.map(({ name, id }, index) => (
              <Select.Option key={id} value={id}>
                {name}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item name="content" label="任务内容" >
          <Input.TextArea maxLength={256} />
        </Form.Item>
        <Row>
          <Col lg={{ offset: 8 }} md={{ offset: 8 }} sm={{ offset: 12 }}>

            <Button htmlType="submit" >创建</Button>
          </Col>
          <Col push={1} lg={{ offset: 6 }} md={{ offset: 8 }} sm={{ offset: 12 }}>
            <Button onClick={() => onCancel()}>取消</Button>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};

export default CreateForm;
